<script setup lang="ts">
import { ref } from "vue";

const sidebarVisible = ref(true);
const sidebarWidth = ref("200px");

const toggleSidebar = () => {
  sidebarVisible.value = !sidebarVisible.value;
  sidebarWidth.value = sidebarVisible.value ? "20vh" : "0";
};

const majorPoetList = ref<Array<string>>([
  "晓出净慈寺送林子方",
  "小池",
  "宿新市徐公店",
  "闲居初夏午睡起",
  "新柳",
  "舟过安仁",
  "插秧歌",
  "竹枝词",
  "初入淮河四绝句",
]);
</script>

<template>
  <div class="side-bar">
    <!--  <el-button @click="toggleSidebar">Toggle Sidebar</el-button>-->
    <el-aside :width="sidebarWidth" v-model="sidebarVisible">
      <div class="sidebar">
        代表作：
        <div v-for="poetName in majorPoetList">
          <router-link to="/poet">
            <div :key="poetName">{{ poetName }}</div>
          </router-link>

          <div />
        </div>
      </div>
    </el-aside>
  </div>
</template>

<style scoped>
.side-bar {
  border: #1a1a1a 1px dashed;
}
</style>
